<template>
  <div class="header">
    <div style="height: 25px;width: 100%;display: flex;justify-content: right" data-wails-drag>
      <div class="hover1" style="width: 35px;height: 25px;display: flex;justify-content: center;align-items: center;"
           @click="miniWindowBtn">
        <LineOutlined style="color: aliceblue;font-size: 15px"/>
      </div>
      <div class="hover1" style="width: 35px;height: 25px;display: flex;justify-content: center;align-items: center;"
           @click="maxWindowBtn">
        <BorderOutlined style="color: aliceblue;font-size: 12px"/>
      </div>
      <div class="hover2" style="width: 35px;height: 25px;display: flex;justify-content: center;align-items: center;"
           @click="closeBtn">
        <CloseOutlined style="color: aliceblue;font-size: 15px"/>
      </div>
    </div>
    <router-view/>
  </div>
</template>

<script>
import {BorderOutlined, CloseOutlined, LineOutlined} from "@ant-design/icons-vue"

export default {
  name: 'App',
  components: {
    CloseOutlined,
    BorderOutlined,
    LineOutlined
  },
  setup() {
    const miniWindowBtn = () => {
      window.runtime.WindowMinimise()
    }
    const maxWindowBtn = () => {
      window.runtime.WindowMaximise()
    }
    const closeBtn = () => {
      window.runtime.Quit()
    }

    return {
      miniWindowBtn,
      maxWindowBtn,
      closeBtn
    }
  }
}
</script>
<style>
html, body, #app {
  margin: 0;
  padding: 0;
  height: 100%;
  width: 100%;
  background-color: rgba(255, 255, 255, 0);
  font-family: Avenir, Helvetica, Arial, sans-serif;
}

.header {
  height: 100%;
  width: 100%;
  background: #282b3e;
  border-radius: 6px;
  border: 0;
}

.hover1:hover {
  background: #a3a3a3;
}

.hover2:hover {
  background: #b20000;
}
</style>